.columns(@n, @i:1) when (@i =< @n) {
    .col-@{i} {
        width: (@i * 100% / @n);
    }
    .columns(@n, (@i + 1));
}

.transition(@time: 0.5s) {
    transition: all @time;
}

.notransition(){
    -webkit-transition: none !important;
    -moz-transition: none !important;
    -ms-transition: none !important;
    -o-transition: none !important;
    transition: none !important;
}

.texthidden{
    overflow: hidden;
    text-overflow: ellipsis; 
    -o-text-overflow: ellipsis;
    white-space:nowrap;
}

// 引入根目录img目录下的文件
.bg-image(@url: '', @cache: 0){
    background-image: url(~'../img/@{url}.png?t=@{cache}');
    background-image: -webkit-image-set(url(~'../img/@{url}.png?t=@{cache}') 1x,url(~'../img/@{url}@2x.png?t=@{cache}') 2x);
    background-repeat: no-repeat;
}

// 按钮左右两边的内边距
.btnlang(@padd: 10%) {
    padding: 0 @padd;
}

// 给需要的元素添加宽度样式
.setSelfWidth(){
    &.w10{
        width: 10%;
    }
    &.w20{
        width: 20%;
    }
    &.w30{
        width: 30%;
    }
    &.w40{
        width: 40%;
    }
    &.w45{
        width: 45%;
    }
    &.w50{
        width: 50%;
    }
    &.w55{
        width: 55%;
    }
    &.w60{
        width: 60%;
    }
    &.w70{
        width: 70%;
    }
    &.w80{
        width: 80%;
    }
    &.w90{
        width: 90%;
    }
    &.w100{
        width: 100%;
    }
}

.setWidth(){
    .w10{
        width: 10%;
    }
    .w20{
        width: 20%;
    }
    .w30{
        width: 30%;
    }
    .w35{
        width: 35%;
    }
    .w40{
        width: 40%;
    }
    .w45{
        width: 45%;
    }
    .w50{
        width: 50%;
    }
    .w55{
        width: 55%;
    }
    .w60{
        width: 60%;
    }
    .w70{
        width: 70%;
    }
    .w80{
        width: 80%;
    }
    .w90{
        width: 90%;
    }
    .w100{
        width: 100%;
    }
}

.webupload() {
    .webuploader-container {
        position: relative;
        display: inline-block;
        margin-right: 20px;
    }
    .webuploader-element-invisible {
        position: absolute !important;
        clip: rect(1px 1px 1px 1px); /* IE6, IE7 */
        clip: rect(1px,1px,1px,1px);
    }
    .webuploader-pick {
        position: relative;
        cursor: pointer;
        color: #fff;
        text-align: center;
        overflow: hidden;
    }
    .webuploader-pick-hover {
        opacity: 0.8;
    }
    
    .webuploader-pick-disable {
        opacity: 0.6;
        pointer-events:none;
    }
}

.opacity(@alpha: 0.5, @filter: 50) {
    opacity: @alpha;
    filter: alpha(opacity= @filter);
}

.scrollbar() {
    &::-webkit-scrollbar {
        width: 4px;
        height: 1px;
      }
    &::-webkit-scrollbar-thumb {
        border-radius: 10px;
        box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.1);
        background: #aaa;
    }
    &::-webkit-scrollbar-track {
        border-radius: 10px;
        background: @color-main-lll;
    }
}